<template>
	<view class="wui-timeLineItem">
		<template>
			<view class="timeLineItem-left timeLineItem-icon iconfont" :class="[icon]" v-if="icon"
				:style="[nodeComputed,iconComputed,dotSizeComputed]"></view>
			<view class="timeLineItem-left timeLineItem-dot" v-else
				:style="[nodeComputed,dotColorComputed,dotSizeComputed]"></view>
		</template>

		<view class="timeLineItem-right">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'wui-timeLineItem',
		props: {
			dotColor: {
				type: String,
				default: '#0081FF'
			},
			icon: {
				type: String,
				default: 'icon-icon_TikTok-square'
			},

			iconColor: {
				type: String,
				default: '#000'
			},
			dotSize: {
				type: String,
				default: '80'
			}
		},
		computed: {
			nodeComputed() {
				return this.$wuiUtils.queryParent.call(this,'w-timeLine').nodeLeft
			},
			dotColorComputed() {
				return {
					'--dot-color': this.dotColor
				}
			},
			iconComputed() {
				return {
					'--icon-color': this.iconColor
				}
			},
			dotSizeComputed() {
				return {
					'--dot-size': uni.upx2px(this.dotSize) + 'px'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wui-timeLineItem {
		display: flex;
		position: relative;
		.timeLineItem-left {
			position: absolute;
			left: calc(var(--node-left) / 2 - var(--dot-size)/2 - var(--node-left));
			border: 16rpx solid var(--background);
			position: absolute;
			top: 6rpx;
			width: var(--dot-size);
			height: var(--dot-size);
			font-size: calc(var(--dot-size) * .7);
			background-color: var(--background);
		}

		.timeLineItem-dot {
			background-color: var(--dot-color);
			border-radius: 50%;
		}

		.timeLineItem-icon {
			display: flex;
			justify-content: center;
			align-items: center;
			color: var(--icon-color);
		}
		
		.timeLineItem-right{
			flex: 1;
			flex-shrink: 0;
		}
	}
</style>
